<template>
  <div class="chart-container">
    <el-empty description="暂无数据" v-if="empty" />
    <div
      v-if="loading"
      v-loading="loading"
      element-loading-text="数据加载中..."
      element-loading-background="transparent"
      style="width: 100%; height: 30vh"
      class="loading-map"
    ></div>
    <div v-for="(item, index) in processData.currLineData" :key="index" style="width: 100%; height: 30vh; margin-bottom: 5vh">
      <graph-line
        v-if="graphData && graphData[item]"
        :data1="graphData?.[item]"
        :datax="Array.from({ length: graphData?.[item].length || 1770 }, (_, i) => i + 1)"
        :data-name="[processName.currLineName[index]]"
        :title="fomatterName(processName.currLineName[index])"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import GraphLine from '../components/GraphLine.vue';
  import { rateApi } from '/@/api/report/processParameter/index';
  import { ElMessage } from 'element-plus';

  const props = defineProps({
    productionLine: { type: String, required: true },
    coildNo: { type: String, required: true },
  });

  const loading = ref(false);
  const empty = ref(false);

  const graphData = ref<{ [key: string]: number[] }>();

  interface ProcessData {
    currLineData: string[];
    tcm2280Data: string[];
    cal1630Data: string[];
    cal2150Data: string[];
    cgl1870Data: string[];
  }

  interface ProcessName {
    currLineName: string[];
    tcm2280Name: string[];
    cal1630Name: string[];
    cal2150Name: string[];
    cgl1870Name: string[];
  }

  // 初始化所有数据
  const processData = ref<ProcessData>({
    currLineData: [],
    tcm2280Data: [
      'tcm_process_speed',
      'tcm_tank1_temp',
      'tcm_tank2_temp',
      'tcm_tank3_temp',
      'tcm_rinse_ph',
      'tcm_dry_temp',
      'tcm_tank1_emu_temp',
      'tcm_tank2_emu_temp',
      'tcm_tank3_emu_temp',
      'tcm_1#_ru_pressure',
      'tcm_2#_ru_pressure',
      'tcm_3#_ru_pressure',
      'tcm_4#_ru_pressure',
      'tcm_5#_ru_pressure',
      'tcm_mill_speed',
    ],
    cal1630Data: [
      'cal_alkali1_wash_cond',
      'cal_alkali2_wash_cond',
      'cal_alkali1_wash_temp',
      'cal_alkali2_wash_temp',
      'cal_elec_clean_cond',
      'cal_elec_clean_temp',
      'cal_hot_water_rinse_temp',
      'cal_heat_h2',
      'cal_heat_fur_pressure',
      'cal_quench_temp',
      'cal_quench_cond',
      'cal_spm_elong_act',
      'cal_spm_ra',
      'cal_heat_strip_temp',
      'cal_sc_strip_temp',
      'cal_rc_strip_temp',
      'cal_oas3_strip_temp',
    ],
    cal2150Data: [
      'cal_alkali1_wash_cond',
      'cal_alkali2_wash_cond',
      'cal_alkali1_wash_temp',
      'cal_alkali2_wash_temp',
      'cal_elec_clean_cond',
      'cal_elec_clean_temp',
      'cal_hot_water_rinse_temp',
      'cal_heat_h2',
      'cal_heat_fur_pressure',
      'cal_quench_temp',
      'cal_quench_cond',
      'cal_spm_elong_act',
      'cal_spm_ra',
      'cal_heat_strip_temp',
      'cal_sc_strip_temp',
      'cal_rc_strip_temp',
      'cal_oas3_strip_temp',
    ],
    cgl1870Data: [
      'cgl_alkali_spray_cond_act',
      'cgl_alkali_brush_cond_act',
      'cgl_clean_alkali_spray_temp',
      'cgl_clean_alkali_brush_temp',
      'cgl_clean_elec_temp',
      'cgl_clean_rinse_temp',
      'cgl_elec_cond_act',
      'cgl_rinse_cond_act',
      'cgl_spm_liquid_conc',
      'cgl_air_knife_dis_top',
      'cgl_air_knife_dis_btm',
      'cgl_air_knife_high_top',
      'cgl_air_knife_high_btm',
      'cgl_gi_znpot_temp',
      // 'cgl_ga_znpot_temp',
      'cgl_spm_elong_act',
      'cgl_oil_amount',
      'cgl_p5_temp_act',
      // 'cgl_scs_strip_temp_act',
      'cgl_p8_temp_act', // 'cgl_rcs_strip_temp_act',
      'cgl_p10_temp_act',
      'cgl_process_speed',
    ],
  });

  const processName = ref<ProcessName>({
    currLineName: [],
    tcm2280Name: [
      '酸洗工艺段速度[m/min]',
      '1#酸槽温度平均值',
      '2#酸槽温度平均值',
      '3#酸槽温度平均值',
      '漂洗槽PH值平均值',
      '烘干机温度平均值',
      '乳化液1#箱温度平均值',
      '乳化液2#箱温度平均值',
      '乳化液3#箱温度平均值',
      '1#乳化液喷射梁压力',
      '2#乳化液喷射梁压力',
      '3#乳化液喷射梁压力',
      '4#乳化液喷射梁压力',
      '5#乳化液喷射梁压力',
      '轧制速度[m/min]',
    ],
    cal1630Name: [
      '#1碱浸刷洗槽循环槽碱液电导率平均值',
      '#2碱浸刷洗槽循环槽碱液电导率平均值',
      '#1碱浸刷洗槽循环槽碱液温度平均值',
      '#2碱浸刷洗槽循环槽碱液温度平均值',
      '电解清洗循环槽碱液电导率平均值',
      '电解清洗循环槽碱液温度平均值',
      '热水漂洗循环槽温度',
      'Htg1氢含量',
      'Htg1炉压',
      '水淬槽水温',
      '水淬槽电导率',
      '平整延伸率实际值均值[%]',
      '粗糙度检测仪均值',
      '加热段带温[℃]',
      '缓冷段带温[℃]',
      '快冷段带温[℃]',
      '时效3段带温[℃]',
    ],
    cal2150Name: [
      '#1碱浸刷洗槽循环槽碱液电导率平均值',
      '#2碱浸刷洗槽循环槽碱液电导率平均值',
      '#1碱浸刷洗槽循环槽碱液温度平均值',
      '#2碱浸刷洗槽循环槽碱液温度平均值',
      '电解清洗循环槽碱液电导率平均值',
      '电解清洗循环槽碱液温度平均值',
      '热水漂洗循环槽温度',
      'Htg1氢含量',
      'Htg1炉压',
      '水淬槽水温',
      '水淬槽电导率',
      '平整延伸率实际值均值[%]',
      '粗糙度检测仪均值',
      '加热段带温[℃]',
      '缓冷段带温[℃]',
      '快冷段带温[℃]',
      '时效3段带温[℃]',
    ],
    cgl1870Name: [
      '碱喷电导率实际[μS/cm]',
      '碱刷电导率实际[μS/cm]',
      '清洗段碱喷循环槽温度[℃]',
      '清洗段碱刷循环槽温度[℃]',
      '清洗段电解循环槽温度[℃]',
      '清洗段漂洗循环槽温度[℃]',
      '电解电导率实际[μS/cm]',
      '漂洗电导率实际[μS/cm]',
      '光整液浓度',
      '气刀距离实际值-上表面',
      '气刀距离实际值-下表面',
      '气刀高度实际值-上表面',
      '气刀高度实际值-下表面',
      'GI锌锅温度',
      // 'GA锌锅温度',
      '延伸率实际（spm el）',
      '涂油重量',
      '加热温度',
      // 'SCS温度',
      '快冷温度',
      '入锌锅温度',
      '工艺速度[m/min]',
    ],
  });

  const fomatterName = (name: string): string => {
    return name.indexOf('[') === -1 ? (name.indexOf('（') === -1 ? name : name.slice(0, name.indexOf('（'))) : name.slice(0, name.indexOf('['));
  };

  const getCoildGraph = async () => {
    empty.value = false;
    const param = {
      line: props.productionLine.toUpperCase(),
      extid: [props.coildNo],
      curve: processData.value.currLineData,
    };
    const res = await rateApi.getCoildGraph(param);
    if (res.data.data.curve.length > 0) {
      if (res.data.data.curve[0].cgl_air_knife_dis_top)
        res.data.data.curve[0].cgl_air_knife_dis_top = res.data.data.curve[0].cgl_air_knife_dis_top.map((item: any) => item / 100);
      if (res.data.data.curve[0].cgl_air_knife_dis_btm)
        res.data.data.curve[0].cgl_air_knife_dis_btm = res.data.data.curve[0].cgl_air_knife_dis_btm.map((item: any) => item / 100);
      graphData.value = res.data.data.curve[0];
    } else {
      empty.value = true;
    }
    loading.value = false;
  };

  onMounted(() => {
    try {
      loading.value = true;
      processData.value.currLineData = [];
      processName.value.currLineName = [];
      if (!props.productionLine || !props.coildNo) {
        console.error('产线和线卷号必须被正确设置');
        throw new Error('产线和线卷号必须被正确设置');
      }
      if (props.productionLine == 'cgl1870') {
        processData.value.currLineData = processData.value.cgl1870Data;
        processName.value.currLineName = processName.value.cgl1870Name;
      } else if (props.productionLine == 'cal1630') {
        processData.value.currLineData = processData.value.cal1630Data;
        processName.value.currLineName = processName.value.cal1630Name;
      } else if (props.productionLine == 'cal2150') {
        processData.value.currLineData = processData.value.cal2150Data;
        processName.value.currLineName = processName.value.cal2150Name;
      } else if (props.productionLine == 'tcm2280') {
        processData.value.currLineData = processData.value.tcm2280Data;
        processName.value.currLineName = processName.value.tcm2280Name;
      } else {
        console.error('产线设置错误');
        throw new Error('产线设置错误');
      }

      getCoildGraph();
    } catch (err: any) {
      console.error('获取卷号数据失败：' + err);
      loading.value = false;
      ElMessage.error('获取卷号数据失败：' + err.message);
    }
  });
</script>
<style lang="less" scoped>
  .loading-map .el-loading-mask {
    z-index: 1 !important;
  }
</style>
